<template>
  <view class="multiple-options">
    <view class="list">
      <block v-for="(item, index) in listData" :key="index">
        <view class="list__item" :class="[`tn-main-gradient-${item.bg}--light`]" @tap="navOptionsPage(item.url)" :style="index === 0 && { marginTop: '0' }">
          <view class="list__logo-image">
            <view class="icon-wrapper tn-shadow-blur" :class="item.bgbutnColor">
              <text class="t-icon" :class="[item.icon]" style="color: #ffffff;width: 25px;height: 25px;"></text>
            </view>
          </view>

          <view class="list__content">
            <view class="title">{{ item.title }}
              <sapn v-if="item.data && item.data[0] && item.data[0].remark" class="justify-content-item tn-color-gray tn-text-left tn-color-gray" style="padding-left: 10rpx;">
                <text   class="tn-text-sm">{{ item.data[0].remark }}</text>
              </sapn>
            </view>
			
            <view v-if="item.data && item.data[0] && item.data[0].createTime">
              <view class="justify-content-item tn-text-left tn-margin-bottom-sm">
                <text style="color: rgb(240, 147, 10);" class="tn-icon-time-fill tn-padding-right-xs tn-padding-left-xs tn-text-lg"></text>
                <text class="tn-text-lg"> {{ timeDifference(item.data[0].createTime) }}</text>
              </view>
            </view>
            <view class="list__content__desc tn-margin-top-sm">
              <view class="justify-content-item tn-text-left">
				<text style="color: rgb(240, 147, 10);" class="tn-icon-like-fill tn-padding-right-xs tn-padding-left-xs tn-text-lg"></text>
                <!-- <text class="t-icon t-icon-aixin_shixin"></text> -->
                <text class="tn-text-md tn-color-gray--dark">今日{{ item.todayCount}}次</text>
              </view>
            </view>
          </view>
          <view v-if="item.data && item.data[0] &&  item.data[0].quantity && index!=2" class="quantity-wrapper"> 
            <view class="quantity-container tn-shadow-blur">
              <view class="icon-circle">
                <text style="color: #ffffff;" :class="index === 0 ? 'tn-icon-baby-fill' : 'tn-icon-eat-fill'"></text>
              </view>
              <text class="quantity-value">{{item.data[0].quantity || '--'}} {{index === 0 ? 'ml' : 'g‎'}}</text>
            </view>
          </view>
          <view class="list__icon  tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="item.bgbutnColor">
            <view @click.stop="add(index)" class="tn-color-white tn-icon-add"></view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  name: 'multiple-options-demo',
  props: {
    // 显示的列表数据
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      listData: [],
      baseValue: 500
    }
  },
  watch: {
    list(val) {
      this.initList()
    }
  },
  created() {
    this.initList()
  },
  methods: {
    // 初始化列表数据
    initList() {
      // 给列表添加背景颜色数据
      this.listData = this.list.map((item, index) => {
        item.mainIcon = item?.mainIcon || 'medicine'
        item.subIcon = item?.subIcon || ''
        return item
      })
    },

    navOptionsPage(url) {
      uni.navigateTo({
        url: url
      })
    },

    add(index) {
      this.$emit('add', index); // 发送带参数的 'message' 事件
    },
    timeDifference(time) {
      const givenTime = new Date(time);
      const currentTime = new Date();

      // 计算时间差，单位为毫秒
      const diff = currentTime - givenTime;
      const hours = Math.floor(diff / (1000 * 60 * 60));
      
      if (hours >= 48) {
        const days = Math.floor(hours / 24);
        return `${days}天`;
      } else {
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
        return `${hours}:${minutes}:${seconds}`;
      }
    },
    calculatePercent(item) {
      if (item && item > 0) {
        return (item / this.baseValue) * 100;
      }
      return 20;
    }
  },

  mounted() {
    // 每分钟更新一次
    setInterval(() => {
      this.$forceUpdate();
    }, 1000);
  }
}
</script>

<style lang="scss" scoped>
.list {
  &__item {
    display: flex;
    align-items: center;
    margin: 30rpx;
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 80rpx;
    min-height: 160rpx;
    position: relative;
  }

  &__logo-image {
    width: 90rpx;
    height: 90rpx;
    
    .icon-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      
      text {
        font-size: 46rpx;
      }
    }
  }

  &__content {
    flex: 1;
    margin: 0 30rpx;
    
    .title {
      font-size: 32rpx;         // 适中的字体大小
      font-weight: 600;         // 适当加粗
      color: #1a1a1a;          // 更自然的黑色
      line-height: 1.5; 
    }
  }

  &__icon {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .tn-circle-progress {
    margin: 0 20rpx;
  }
}

.quantity-wrapper {
  position: absolute;
  right: 110rpx;
  top: 50%;
  transform: translateY(-50%);
}

.quantity-container {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #FFA726, #FF9800);
  padding: 6rpx 20rpx 6rpx 6rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.icon-circle {
  background: rgba(255, 255, 255, 0.2);
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.tn-icon-baby-fill {
  color: #ffffff;
  font-size: 30rpx;
}

.quantity-value {
  color: #ffffff;
  font-size: 26rpx;
  font-weight: 600;
  letter-spacing: 1rpx;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}
</style>

